<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
<style type="text/css">
.baoyang-item{
	position: relative;
	background: #fff;
	padding:1rem  1rem 1rem 1rem;
} 
.baoyang-item-t1{
	display: flex;
	display: -webkit-flex;
}
.byitem-ctxt-t1{
	font-size:18px;
	line-height: 100%;
}
.byitem-icon{
	display: block;
	width:4rem;
	height: 4rem;
	background: #ccc;
	border-radius: 0.2rem;
	overflow: hidden;
	box-shadow:0 0 1px #ccc;
	-webkit-box-shadow:0 0 1px #ccc;
	position: relative;
}
.byitem-ctxt{
	flex: 1;
	-webkit-flex: 1;
	padding-left: 0.5rem;
}
.byitem-ctxt-t2{
	color: #555;
	font-size:14px;
	padding:0.3rem 0 0 0;
}
.baoyang-item-t2{
	display: flex;
	display: -webkit-flex;
	padding: 0.5rem 0 0 0;
}
.byitem-t2-img{
	flex: 1;
	-webkit-flex: 1;
}
.byitem-t2-btns{
	width: 90px;
	height:  auto;
}
.byitem-t2-btns .byitem-t2-btn:last-child{
	margin-bottom: 0;
}
.byitem-t2-btn{
	display: block;
	width: auto;
	height:2.5rem;
	background: #00A2EA;
	margin-bottom: 0.2rem;
	text-align: center;
	line-height:2.5rem;
	color: #fff;
	border-radius: 0.1rem;
	font-size:14px;
}
.t2-btn-colors{
	background-color:#F48631;
}
.byitem-t2-img{
	margin-right: 0.2rem;
	overflow: hidden;
	font-size: 0;
	height:10.599rem;
	overflow: hidden;
	border-radius: 0.1rem;
	position: relative;
}
.byitem-yuyuetxt{
	width:100%;
	height:20px;
	text-align: center;
	color: #fff;
	font-size: 14px;
	color: orange;
	line-height: 35px;
	text-align: left;
}
.dignwei{
	float: right;
	font-weight: bold;
	color:orangered;
}
#jcontent{
	margin-top: 10px;
}
.baoyangbtn{
	position: absolute;
	width: 100%;
	height:2.5rem;
	bottom:0;
	left: 0;
	margin-bottom: -1px;
	background:#00A2EA;
	font-size: 16px;
	color:#fff;
	font-weight: bold;
	text-align: center;
	line-height: 2.5rem;
}
#daohang{
	font-size: 28px;
	color:#555;
}
</style>
</head>
<body>
<div id="jcontent" class="jcontent">
	<div id="data-list"></div>
	<div id="nodatas" class="nodatas">
		<span class="nodatas-icon"><i class="iconfont icon-wjl nodataicons"></i></span>
		<div class="nodata-tip">未找到数据,请在首页先关注4S店</div>
		<a id="helps" class="nodatabtn">查看帮助</a>
	</div>
</div>
<div class="index-bline"></div>
<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="js/template.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.lazyload.js"></script>
<script src="js/gps.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.lazyload.img.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.plusReady(function(){
	//下拉加载最新数据 
	_currentWebview=plus.webview.currentWebview();
	_currentWebview.setPullToRefresh(webapp.config.pullRefresh,function(){
		appointment();
		_currentWebview.endPullToRefresh();
	});
});
//点击4s店
mui('#jcontent').on('tap','.byitem-t2-img', function(e) {
	var sellerId =this.getAttribute("data-id");
	var sellerName=this.getAttribute("data-sellerName");
	var followNum=this.getAttribute("data-followNum");
	var fansNum=this.getAttribute("data-fansNum");
	var adress=this.getAttribute("data-address");
	var logo=this.getAttribute("data-logo");
	webapp.openByTpl({
		title:"选择车辆",
		hrefs:"/tpl/checkCars.html?id="+sellerId+"&sellerName="+sellerName+"&followNum="+followNum+"&fansNum="+fansNum+"&adress="+adress+"&logo="+logo
	});
});
//点击商家logo进入商家详情页面
mui('#jcontent').on('tap','.sellerLogo', function(e) {
	webapp.openByTpl({
		title:"商家详情",
		hrefs:"/tpl/4s.html?business="+this.getAttribute("sellerId")
	});
});
//点击4s店
mui('#jcontent').on('tap','#daohang', function(e) {
	var _lat=this.getAttribute("data-lat");
	var _lng=this.getAttribute("data-lng");
	plus.geolocation.getCurrentPosition(function(position){
		var arr2 = GPS.gcj_encrypt(_lng,_lat);
		var arr3 = GPS.gcj_encrypt(_lng,_lat);
		var dst = new plus.maps.Point(position.coords.longitude,position.coords.latitude); //开始地点，百度地图中该参数无效
		var src = new plus.maps.Point(_lat,_lng); //终点
		plus.maps.openSysMap( dst, "", src );
	}, function ( e ) {
		mui.toast("定位失败，请开启GPS");
	},{geocode:true,provider:'amap'});
	/***
	
//	alert("1231312"+_lat)
	//转换坐标体系为
	
	//设置目标位置坐标点和其实位置坐标点
	var dst = new plus.maps.Point(null,null); //开始地点，百度地图中该参数无效
	var src = new plus.maps.Point(_lat,_lng); //终点
	// 调用系统地图显示 
//	坐标位置第一个参数是经度，第二个参数是纬度
	plus.maps.openSysMap( dst, "", src );
	****/
});
//保养预约
mui('#jcontent').on('tap','#helps', function(e) {
	webapp.openByTpl({
		title:"预约帮助",
		hrefs:"/help.html"
	});
});

/**
 * 加载数据
 */
window.addEventListener("loadList", function(e) {
	appointment();
});

/**
 * 
 * 预约数据请求
 * 
 */
function appointment(){
	document.getElementById("data-list").innerHTML="";
	webapp.ajax({
		url:"/carLife/admin/interface/order/selectFollowedSeller?pageSize=100",
		success:function(json){
			appointmentCallBack(json);
		}
	});	
}

function appointmentCallBack(json){
	if(json.code=="200"){
		json.imgPath=webapp.config.restUrl;
		var tem=template('model',json);
		document.getElementById("data-list").insertAdjacentHTML("afterbegin", tem);
		if(json.data.length>0){
			document.getElementById("nodatas").classList.add("hide");
		}
		window.setTimeout(function(){
			mui(document).imageLazyload();
		},360);
		return false;
	}
	mui.toast(json.msg);
}

</script>
<!--以下为模板-->
<script id="model" type="text/html">
{{each data as item i}}
<div class="baoyang-item line-b ">
	<div class="baoyang-item-t1">
		<a class="byitem-icon">
			<img class="img sellerLogo" sellerId="{{item.id}}" data-lazyload="{{imgPath}}{{item.logoImageMap.path}}-120{{item.logoImageMap.type}}" src="img/zw.png"/>
		</a>
		<div class="byitem-ctxt adressPos">
			<div class="byitem-ctxt-t1">{{item.name}}</div>
			<div class="byitem-ctxt-t2">{{item.address}}</div>
			<div class="byitem-ctxt-t2">{{item.insuranceTel}}</div>
		</div>
		<a id="daohang" data-lat="{{item.latitude}}"  data-lng="{{item.longitude}}">
			<i class="iconfont icon-iconfontluxian"></i>
		</a>
	</div>
	<div class="baoyang-item-t2">
		<div class="byitem-t2-img" data-logo="{{imgPath}}{{item.titleImageMap.path}}-640{{item.titleImageMap.type}}" data-id="{{item.id}}" data-address="{{item.address}}" data-sellerName="{{item.name}}" data-fansNum="{{item.fansNum}}"  data-followNum="{{item.followNum}}">
			<div class="baoyangbtn">保养预约</div>
			<img class="img" data-lazyload="{{imgPath}}{{item.propagateImageMap.path}}-640{{item.propagateImageMap.type}}" src="img/zw3.png"/>
		</div>
		<div class="byitem-t2-btns">
			<a class="byitem-t2-btn" href="tel:{{item.pepairTel}}">维修咨询</a>
			<a class="byitem-t2-btn" href="tel:{{item.rescueTel}}">保险咨询</a>
			<a class="byitem-t2-btn" href="tel:{{item.switchboardTel}}">拨打总机</a>
			<a class="byitem-t2-btn t2-btn-colors" href="tel:{{item.tel}}">24H救援</a>
		</div>
	</div>
	<div class="byitem-yuyuetxt">保养和预约功能需4S店认证后才能使用,请认证>></div>
</div>
{{/each}}
</script>
</body>
</html> 